<template>
  <div class="main-container">
    <div class="info">
      <h2>楼层信息</h2>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="楼层">
          <el-select v-model="formInline.region" placeholder="请选择楼层">
            <el-option label="一楼" value="yilou"></el-option>
            <el-option label="二楼" value="erlou"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <p>
        楼层：{{ formInline.region === 'yilou'? '一楼' : '二楼' }}
        总床数：<span id="total-beds">{{ totalBeds }}</span>
        空闲： <span id="empty-rooms">{{ emptyRooms }}</span>
        有人： <span id="occupied-rooms">{{ occupiedRooms }}</span>
        外出： <span id="away-rooms">{{ awayRooms }}</span>
      </p>
    </div>

    <!-- 楼层布局 -->
    <div class="floor-layout" v-show="formInline.region === 'yilou'">
      <div v-for="(room, index) in firstFloorTableData" :key="room.id" :class="`room ${room.status}`"
        @click="toggleRoomStatus(room)">
        <span>{{ room.name }}</span>
      </div>
    </div>
    <div class="floor-layout" v-show="formInline.region === 'erlou'">
      <div v-for="(room, index) in secondFloorTableData" :key="room.id" :class="`room ${room.status}`"
        @click="toggleRoomStatus(room)">
        <span>{{ room.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 定义表单数据，将 region 初始值设为 'yilou'
const formInline = ref({
  region: 'yilou'
});

// 定义一楼房间数据
const firstFloorTableData = ref([
  { id: '1001', name: '电梯厅', status: '电梯厅' },
  { id: '1002', name: '洗衣房', status: '洗衣房' },
  { id: '1003', name: '活动中心', status: '活动中心' },
  { id: '1004', name: '1001-1', status: '空闲' },
  { id: '1005', name: '1001-2', status: '有人' },
  { id: '1006', name: '1002-1', status: '空闲' },
  { id: '1007', name: '1002-2', status: '有人' },
  { id: '1008', name: '1003-1', status: '空闲' },
  { id: '1009', name: '1003-2', status: '有人' },
  { id: '1010', name: '1004-1', status: '空闲' },
  { id: '1011', name: '1004-2', status: '有人' },
  { id: '1012', name: '1005-1', status: '空闲' },
  { id: '1013', name: '1005-2', status: '有人' },
  { id: '1014', name: '1006-1', status: '空闲' },
  { id: '1015', name: '1006-2', status: '有人' },
  { id: '1016', name: '1007-1', status: '空闲' },
  { id: '1017', name: '1007-2', status: '有人' },
  { id: '1018', name: '1008-1', status: '空闲' },
  { id: '1019', name: '1008-2', status: '有人' },
  { id: '1020', name: '1009-1', status: '空闲' },
  { id: '1021', name: '1009-2', status: '有人' },
  { id: '1022', name: '1010-1', status: '空闲' },
  { id: '1023', name: '1010-2', status: '有人' },
]);

// 定义二楼房间数据（这里假设数据不同，你可按需修改）
const secondFloorTableData = ref([
  { id: '2001', name: '楼梯间', status: '楼梯间' },
  { id: '2002', name: '储物间', status: '储物间' },
  { id: '2003', name: '会议室', status: '会议室' },
  { id: '2004', name: '2001-1', status: '空闲' },
  { id: '2005', name: '2001-2', status: '有人' },
  { id: '2006', name: '2002-1', status: '空闲' },
  { id: '2007', name: '2002-2', status: '有人' },
  { id: '2008', name: '2003-1', status: '空闲' },
  { id: '2009', name: '2003-2', status: '有人' },
  { id: '2010', name: '2004-1', status: '空闲' },
  { id: '2011', name: '2004-2', status: '有人' },
  { id: '2012', name: '2005-1', status: '空闲' },
  { id: '2013', name: '2005-2', status: '有人' },
  { id: '2014', name: '2006-1', status: '空闲' },
  { id: '2015', name: '2006-2', status: '有人' },
  { id: '2016', name: '2007-1', status: '空闲' },
  { id: '2017', name: '2007-2', status: '有人' },
  { id: '2018', name: '2008-1', status: '空闲' },
  { id: '2019', name: '2008-2', status: '有人' },
  { id: '2020', name: '2009-1', status: '空闲' },
  { id: '2021', name: '2009-2', status: '有人' },
  { id: '2022', name: '2010-1', status: '空闲' },
  { id: '2023', name: '2010-2', status: '有人' },
]);

// 计算统计数据（根据当前显示楼层计算）
const totalBeds = computed(() => {
  if (formInline.value.region === 'yilou') {
    return firstFloorTableData.value.length;
  } else {
    return secondFloorTableData.value.length;
  }
});
const emptyRooms = computed(() => {
  if (formInline.value.region === 'yilou') {
    return firstFloorTableData.value.filter(room => room.status === '空闲').length;
  } else {
    return secondFloorTableData.value.filter(room => room.status === '空闲').length;
  }
});
const occupiedRooms = computed(() => {
  if (formInline.value.region === 'yilou') {
    return firstFloorTableData.value.filter(room => room.status === '有人').length;
  } else {
    return secondFloorTableData.value.filter(room => room.status === '有人').length;
  }
});
const awayRooms = computed(() => {
  if (formInline.value.region === 'yilou') {
    return firstFloorTableData.value.filter(room => room.status === '外出').length;
  } else {
    return secondFloorTableData.value.filter(room => room.status === '外出').length;
  }
});

// 切换房间状态的函数
const toggleRoomStatus = (room) => {
  const statuses = ['空闲', '有人', '外出'];
  const currentStatusIndex = statuses.indexOf(room.status);
  const nextStatusIndex = (currentStatusIndex + 1) % statuses.length;
  room.status = statuses[nextStatusIndex];
};
</script>

<style scoped>
.main-container {
  display: flex;
  flex-direction: column;
  /* 纵向排列 */
  gap: 20px;
  /* 信息区域和房间布局区域的间距 */
}

.info {
  min-width: 200px;
  /* 信息区域的最小宽度 */
}

.floor-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  /* 房间之间的间距 */
}

.room {
  cursor: pointer;
  padding: 50px;
  text-align: center;
  border: 1px solid #ddd;
  width: 200px;
  box-sizing: border-box;
  /* 确保内边距和边框包含在宽度内 */
}

.room.空闲 {
  background-color: #b9f5f5;
}

.room.有人 {
  background-color: #ff8686;
}

.room.外出 {
  background-color: #cccdd1;
}

.room.电梯厅 {
  background-color: #426565;
}

.room.洗衣房 {
  background-color: #bbd2ff;
}

.room.活动中心 {
  background-color: #8ef57f;
}

.room.楼梯间 {
  background-color: #f5aaff;
}

.room.储物间 {
  background-color: #d2b4ff;
}

.room.会议室 {
  background-color: #7ff5d8;
}
</style>